@import './style.less';

@triangle-prefix:      ~"@{prefix}-triangle";

.@{triangle-prefix} {
  position: relative;

  &-inner {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  &-icon {
    width: 0;
    height: 0;
    border-width: 3px;
    border-style: solid;
    border-color: #2ea5ff #2ea5ff transparent transparent;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    opacity: 0.5;

    &:hover {
      opacity: 1;
    }
  }
}

.@{triangle-prefix}-popover {
  &.ant-popover-placement-top .ant-popover-arrow {
    bottom: -6px !important;
  }

  &.ant-popover-placement-bottom .ant-popover-arrow {
    top: -6px !important;
  }

  .ant-popover-arrow {
    border-width: 10px;
    margin-left: -12px !important;

    &:after {
      border-width: 10px;
      margin-left: -10px !important;
    }
  }

  .ant-popover-inner {
    border-radius: 0 !important;

    &-content {
      padding: 12px 20px !important;
      line-height: 28px;
      max-height: 200px;
      overflow: auto;
    }
  }
}
